<template>
  <view>
    <view class="" v-for="d in list">

      <view class="">
        {{d.title}}
      </view>

      <view class="">
        <text :class="{'active':d.exInfo.praised}" @click="praise(d)">赞</text>
        <text> {{d.praise}} </text>
      </view>

    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    api,
    tools
  } from '../../api/api.js'

  const info = ref('')
  const page = ref({
    pageSize: 10,
    pageNumber: 1
  })

  const list = ref([])

  const query = () => {
    api.get(
      `/message/${page.value.pageSize}/${page.value.pageNumber}/2`, {}, (data) => {
        if (data.success) {
          list.value = data.data.data
          page.value = data.data.pageBean
          return
        }
        uni.showModal({
          content: data.message
        })
      }
    );
  }

  const praise = (info) => {
    uni.showLoading({
      title: '点赞处理中...'
    })
    api.post(`/message/praise/${info.mid}`, {}, (data) => {
      uni.hideLoading()
      if (data.success) {
        info.exInfo.praised = !info.exInfo.praised
        info.exInfo.praised ? info.praise++ : info.praise--
        return
      }
      uni.showModal({
        content: data.message
      })
    })
  }

  onLoad(() => {
    query()
  })
</script>

<style scoped>
  .active {
    color: #ff0000;
  }
</style>